{% block book_header %}
<!-- Header -->
<meta name="keywords" content="JavaScript,入門,入門書,チュートリアル,書籍,本,無料,Node.js,ブラウザ" />
<link rel="author" href="https://www.hatena.ne.jp/efcl/" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<style>
    .book-header {
        display: flex;
        flex-direction: row;
        background-color: #333;
    }

    /* link color */
    .book-header a {
        color: #fff;
    }

    /* hover color */
    .book-header .btn:hover, .book-header .btn:focus, .book-header a:focus, .book-header a:hover {
        color: hsla(0, 0%, 100%, 0.75) !important;
    }

    /* Mobile header fixed */
    @media (max-width: 768px) {
        /* Headerを固定する */
        .book-header {
            position: fixed;
            width: 100%;
        }

        /* Icon only */
        .book-header-title-img {
            margin: auto 18px auto 0 !important;
        }

        .book-header-title-h {
            display: none;
        }

        /* Header分のズレを入れる */
        .page-wrapper {
            padding-top: 60px;
        }

        /* github-issue-feedbackを非表示にする */
        .gitbook-plugin-github-issue-feedback {
            display: none;
        }
    }

    /* Dynamic created by GitBook*/
    .btn.pull-left.js-toolbar-action {
        order: 1;
    }

    .book-header-title {
        order: 2;
        display: inline-flex;
        flex-direction: row;
        color: #fff;
    }

    .book-header-title:hover {
        color: hsla(0, 0%, 100%, 0.75);
    }

    .book-header-title-img {
        width: 32px;
        height: 32px;
        padding: 0;
        margin: auto 10px auto 0;
    }

    .book-header-title-h {
        font-size: 20px;
        margin: auto;
        padding: 0;
    }

    .header-center {
        order: 3;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        /* self */
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .header-right {
        order: 4;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* icon size */
        font-size: 24px;
    }

    .github-link {
        color: #fff;
    }

    /* Desktop */
    @media (min-width: 768px) {
        .header-center {
            align-items: center;
        }

        .header-right {
            margin-right: 24px;
        }
    }

    /* DocSearch */
    @media (max-width: 768px) {
        .algolia-autocomplete .ds-dropdown-menu {
            max-width: calc(100vw - 32px) !important;
            min-width: calc(100vw - 32px) !important;
            width: calc(100vw - 32px) !important;
            /* negative margin
              This is absolute element
              */
            margin-left: -32px !important;
        }

        .algolia-autocomplete .algolia-docsearch-suggestion--content {
            width: 100% !important;
            padding-left: 0 !important;
        }

        .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
            display: none !important;
        }

        .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
            display: none !important;
        }
    }

    /* SearchBox */
    .searchbarWrapper {
        height: 50px;
    }

    @media (max-width: 768px) {
        .sbx-custom {
            width: 150px !important;
            padding: initial !important;
        }
    }

    .sbx-custom {
        display: inline-block;
        position: relative;
        min-width: 150px;
        width: 300px;
        max-width: 300px;
        height: 33px;
        white-space: nowrap;
        box-sizing: border-box;
        font-size: 14px;
    }

    .sbx-custom__wrapper {
        width: 100%;
        height: 100%;
    }

    .sbx-custom__input {
        display: inline-block;
        -webkit-transition: box-shadow .4s ease, background .4s ease;
        transition: box-shadow .4s ease, background .4s ease;
        border: 0;
        border-radius: 5px;
        box-shadow: inset 0 0 0 2px #CCCCCC;
        background: #FFFFFF;
        padding: 0 27px 0 33px;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        white-space: normal;
        font-size: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .sbx-custom__input::-webkit-search-decoration, .sbx-custom__input::-webkit-search-cancel-button, .sbx-custom__input::-webkit-search-results-button, .sbx-custom__input::-webkit-search-results-decoration {
        display: none;
    }

    .sbx-custom__input:hover {
        box-shadow: inset 0 0 0 2px #b3b3b3;
    }

    .sbx-custom__input:focus, .sbx-custom__input:active {
        outline: 0;
        box-shadow: inset 0 0 0 2px #4B54DE;
        background: #FFFFFF;
    }

    .sbx-custom__input::-webkit-input-placeholder {
        color: #BBBBBB;
    }

    .sbx-custom__input::-moz-placeholder {
        color: #BBBBBB;
    }

    .sbx-custom__input:-ms-input-placeholder {
        color: #BBBBBB;
    }

    .sbx-custom__input::placeholder {
        color: #BBBBBB;
    }

    .sbx-custom__submit {
        position: absolute;
        top: 0;
        right: inherit;
        left: 0;
        margin: 0;
        border: 0;
        border-radius: 4px 0 0 4px;
        background-color: rgba(255, 255, 255, 0);
        padding: 0;
        width: 33px;
        height: 100%;
        vertical-align: middle;
        text-align: center;
        font-size: inherit;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .sbx-custom__submit::before {
        display: inline-block;
        margin-right: -4px;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

    .sbx-custom__submit:hover, .sbx-custom__submit:active {
        cursor: pointer;
    }

    .sbx-custom__submit:focus {
        outline: 0;
    }

    .sbx-custom__submit svg {
        width: 17px;
        height: 17px;
        vertical-align: middle;
        fill: #3A33D1;
    }

    .sbx-custom__reset {
        display: none;
        position: absolute;
        top: 4px;
        right: 4px;
        margin: 0;
        border: 0;
        background: none;
        cursor: pointer;
        padding: 0;
        font-size: inherit;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        fill: rgba(0, 0, 0, 0.5);
    }

    .sbx-custom__reset:focus {
        outline: 0;
    }

    .sbx-custom__reset svg {
        display: block;
        margin: 4px;
        width: 17px;
        height: 17px;
    }

    .sbx-custom__input:valid ~ .sbx-custom__reset {
        display: block;
        -webkit-animation-name: sbx-reset-in;
        animation-name: sbx-reset-in;
        -webkit-animation-duration: .15s;
        animation-duration: .15s;
    }

    @-webkit-keyframes sbx-reset-in {
        0% {
            -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
            opacity: 0;
        }
        100% {
            -webkit-transform: none;
            transform: none;
            opacity: 1;
        }
    }

    @keyframes sbx-reset-in {
        0% {
            -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
            opacity: 0;
        }
        100% {
            -webkit-transform: none;
            transform: none;
            opacity: 1;
        }
    }
</style>
<div class="book-header" role="navigation">
    {% if glossary.path %}
    <a href="{{ ('/' + glossary.path)|resolveFile }}" class="btn pull-left book-header-menu-button"
       aria-label="{{'GLOSSARY_OPEN'|t }}"><i
            class="fa fa-sort-alpha-asc"></i></a>
    {% endif %}
    <a class="book-header-title" href="{{ ('/')|resolveFile }}">
        <img class="book-header-title-img" alt="js-primer"
             src="{{ ('./gitbook/icons/icon-128x128.png')|resolveFile }}"/>
        <h2 class="book-header-title-h" title="js-primer - JavaScriptの入門書">js-primer</h2>
    </a>
    <div class="searchbarWrapper header-center">
        <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
            <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-8" viewBox="0 0 40 40">
                <path d="M16 32c8.835 0 16-7.165 16-16 0-8.837-7.165-16-16-16C7.162 0 0 7.163 0 16c0 8.835 7.163 16 16 16zm0-5.76c5.654 0 10.24-4.586 10.24-10.24 0-5.656-4.586-10.24-10.24-10.24-5.656 0-10.24 4.584-10.24 10.24 0 5.654 4.584 10.24 10.24 10.24zM28.156 32.8c-1.282-1.282-1.278-3.363.002-4.643 1.282-1.284 3.365-1.28 4.642-.003l6.238 6.238c1.282 1.282 1.278 3.363-.002 4.643-1.283 1.283-3.366 1.28-4.643.002l-6.238-6.238z"
                      fill-rule="evenodd"></path>
            </symbol>
            <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-5" viewBox="0 0 20 20">
                <path d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10zm1.35-10.123l3.567 3.568-1.225 1.226-3.57-3.568-3.567 3.57-1.226-1.227 3.568-3.568-3.57-3.57 1.227-1.224 3.568 3.568 3.57-3.567 1.224 1.225-3.568 3.57zM10 18.272c4.568 0 8.272-3.704 8.272-8.272S14.568 1.728 10 1.728 1.728 5.432 1.728 10 5.432 18.272 10 18.272z"
                      fill-rule="evenodd"></path>
            </symbol>
        </svg>

        <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-custom">
            <div role="search" class="sbx-custom__wrapper">
                <input name="search" placeholder="Search words" autocomplete="off" required="required"
                       class="sbx-custom__input" type="search">
                <button type="submit" title="Submit your search query." class="sbx-custom__submit">
                    <svg role="img" aria-label="Search">
                        <use xlink:href="#sbx-icon-search-8"></use>
                    </svg>
                </button>
                <button type="reset" title="Clear the search query." class="sbx-custom__reset">
                    <svg role="img" aria-label="Reset">
                        <use xlink:href="#sbx-icon-clear-5"></use>
                    </svg>
                </button>
            </div>
        </form>
    </div>
    <div class="header-right">
        <a class="github-link" title="GitHub: asciidwango/js-primer" href="https://github.com/asciidwango/js-primer"
           target="_blank"><i
                class="fa fa-github fa-fw"></i></a>
    </div>
</div>

<script type="text/javascript">
    document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
        this.parentNode.querySelector('input').focus();
    });
</script>
<script>
    var search = docsearch({
        apiKey: 'fd28ebaba94be0c39fb9fa1b2fed4f23', // use a SEARCH-ONLY api key here
        indexName: 'asciidwango',
        inputSelector: '.sbx-custom__input',
        debug: false // set to `true` if you want to inspect the dropdown menu's CSS
    });
</script>

{% endblock %}

